<template>
	<view>
		<!-- 轮播图 -->
		<view class="swiper-view">
			<swiper class="swiper" indicator-dots="true" autoplay="true" circular="true" indicator-active-color="#ffffff">
				<swiper-item v-for="swiper in swiperList" :key="swiper.id">
					<image mode="aspectFill" :src="swiper.imgUrl" @click="goDetail(swiper)"></image>
				</swiper-item>
			</swiper>
			<view class="keep-out"></view>
		</view>
		<view class="" v-if="notice">
			<u-notice-bar type="primary" mode="vertical" :list="notice"></u-notice-bar>
		</view>

		<view class="box">
			<!-- <view class="table">
				<view class="index-task">任务大厅</view>
			</view> -->
			<view class="nav-list">
				<navigator hover-class="none" :url="'/pages/tab/task?type=' + index" class="nav-li" open-type="switchTab"
				  v-for="(item,index) in elements" :key="index">
					<view class="nav-icon">
						<image :src="index===0?icon0:icon1"></image>
					</view>
					<view style="flex: 1; padding-left: 10px;">
						<view class="nav-title">{{item.name}}</view>
						<view class="nav-name">{{item.intro}}</view>
					</view>
				</navigator>
			</view>
		</view>
		<view class="content">
			<view class="member">
				<view class="member-tip">
					会员榜单
				</view>
				<view class="member-list">
					<gbroMarquee v-if="true" broadcastType='mould'  :viewHeight="400"  direction="top"  :broadcastStyle='broadcastStyle' style="width: 100%">
						<view class="member-list-item" v-for="list in 5" :key="list">
							<view class="item-left">
								<u-avatar :size="120" src="http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg"></u-avatar>
								<view class="item-left-text">
									<p>恭喜：134****8288</p>
									<p>今天已经完成38单</p>
								</view>
							</view>
							<view class="item-right">
								<u-icon name="rmb-circle-fill" color="#f3c178" size="45"></u-icon>
								<span>81.7</span>
							</view>
						</view>
					</gbroMarquee>
				</view>
			</view>
        </view>
		<u-popup v-model="adShow" mode="center" border-radius="14" width="650rpx">
			<view class="popup-wrap">
				<view class="popup-title">
					公告
				</view>
				<u-parse class="popup-wrap-text" :html="noticeHtml"></u-parse>
				<view class="iconfont icon-zhidaoliaox" @click="adShow=false"></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import gbroMarquee from '@/components/gbro-marquee/marquee.vue';

	export default {
		components: {
			gbroMarquee
		},
		data() {
			return {
				broadcastData: [

				],//跑马灯参数
				broadcastStyle: {
					speed: 30, //每秒3个字
					font_size: "32", //字体大小(rpx)
					text_color: "#000", //字体颜色
					back_color: "#fff", //背景色
				},
				adShow: true, //通知显示
				noticeHtml: '', //弹窗公告
				swiperList: [],
				item: {
					task: []
				},
				icon0: '../../static/images/icon/dy.png',
				icon1: "../../static/images/icon/ks.png",
				notice: [
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				],
				elements: [{
					title: '抖音',
					name: '点赞、评论、关注',
					color: 'douyin',
					icon: "../../static/images/icon/dy.png"
				}, {
					title: '微博',
					name: '评论',
					color: 'weibo',
					icon: "../../static/images/icon/ks.png"
				}],
			};
		},
		onShow() {
			this.loadData();
		},
		methods: {
			goDetail: function(e) {
				if (e && e.isHref == 1) {
					uni.setStorageSync('helps', JSON.stringify(e));
					uni.navigateTo({
						url: "/pages/helps/detail"
					})

				}
			},
			async loadData() {
				await this.$request.post("/index/getData", {
						dataType: 'json',
						responseType: 'text'
					})
					.then(res => {
						this.noticeHtml = res.data.json.notice.contentHtml;
						this.item = res.data.json;
						this.swiperList = res.data.json.lbt;
						this.elements = res.data.json.types;
						let content = res.data.json.notice.content;
						if (content) {
							content = content.replace(/\n/g, "");
						}
						this.notice.push(content);
						this.broadcastData = res.data.json.bcd;//跑马灯


					})
					.catch(error => {});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f8fb;
	}

	uni-view,
	uni-scroll-view,
	uni-swiper,
	uni-button,
	uni-input,
	uni-textarea,
	uni-label,
	uni-navigator,
	uni-image {
		box-sizing: border-box;
	}

	.swiper-view {
		.swiper {
			width: 100%;
			height: 480rpx;

			image {
				width: 100%;
				height: 480rpx;
			}
		}

		.keep-out {
			width: 100%;
			height: 30upx;
			border-radius: 100% 100% 0 0;
			margin-top: -15upx;
			position: absolute;
		}
	}

	.box {
		background-color: #FFFFFF;
	}


	.nav-list {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		// justify-content: space-between;
		&::before{
			position: absolute;
			left: 50%;
			top: 15%;
			content: '';
			height: 70%;
			width: 1px;
			background-color: #eee;
		}
	}

	.nav-list image {
		width: 90rpx;
		height: 90rpx
	}

	.nav-li {
		padding: 15rpx;
		border-radius: 12rpx;
		width: 48%;
		margin: 10px 0;
		z-index: 1;
		display: flex;
		justify-content: space-between;
	}

	.nav-title {
		font-size: 35rpx;
		font-weight: bold;

	}

	.nav-name {
		font-size: 26rpx;
		text-transform: Capitalize;
		margin-top: 20rpx;
		position: relative;
		color: #949597;
	}

	.nav-icon{
		text-align: center;
	}

	.text-light {
		font-weight: 300;
	}

	@keyframes show {
		0% {
			transform: translateY(-50px);
		}

		60% {
			transform: translateY(40upx);
		}

		100% {
			transform: translateY(0px);
		}
	}

	@-webkit-keyframes show {
		0% {
			transform: translateY(-50px);
		}

		60% {
			transform: translateY(40upx);
		}

		100% {
			transform: translateY(0px);
		}
	}

	.bg-font {
		color: #ffffff;
	}

	.bg-douyin {
		background-color: #3f3f3f;
		color: #ffffff;
	}

	.bg-weibo {
		background-color: #e33f36;
		color: #ffffff;
	}

	.image {
		width: 100%;
		height: 100%;
	}
	.index-task{
		font-size: 18px;
		padding: 0 10px;
	}
	.popup-wrap{
		padding: 20px;
		position: relative;
		.popup-title{
			font-size: 20px;
			text-align: center;
			padding-bottom: 10px;
		}
		&-text{
			color: #757575;
			font-size: 14px;
			line-height: 24px;
			max-height: 58vh;
			overflow-y: scroll;
		}
		.icon-zhidaoliaox{
			margin-top: 10px;
			margin-bottom: -10px;
			font-size: 40px;
			text-align: center;
			color: #007AFF;
			cursor: pointer;
		}
	}
	// 会员榜单
	.member{
		position: relative;
		&-tip{
			position: absolute;
			top: 0;
			left: 10px;
			right: 10px;
			background: #feede3;
			color: #875f53;
			display: flex;
			align-items: center;
			padding: 0 15px;
			font-size: 16px;
			font-weight: bolder;
			height: 40px;
			border-radius: 0 0 8px 8px;
			z-index: 999;
		}
	}
	.member-list{
		position: relative;
		margin-top: 10px;
		padding: 40px 15px 15px;
		background: #fff;
		height: 36vh;
		overflow: hidden;
		&-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20px;
			margin-top: 10px;
			.item-left{
				display: flex;
				align-items: center;
				font-size: 16px;
				&-text{
					padding-left: 15px;
					p{
						color: #000;
						&:last-child{
							color: #c1c5c8;
						}
					}
				}
			}
			.item-right{
				font-size: 16px;
				color: #000;
				display: flex;
				align-items: center;
				span{
					margin-left: 3px;
				}
			}
			&:last-child{
				margin-bottom: 0;
			}
			&:first-child{
			}
		}
	}

</style>
